<template>
  <div class="app" @mousemove="mouseMove">
    <h2>鼠标在当前元素内的x轴坐标--{{ mouseX }}</h2>
    <h2>鼠标在当前元素内的y轴坐标--{{ mouseY }}</h2>
    <button @click="getDog">点击加载图片</button>
    <img width="300" :src="dogUrl" alt="" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "App",
  });
</script>
<script lang="ts" setup>
 import useGetDog from "./hooks/useGetDog"
 import useMousePoint from "./hooks/useMousePoint"
  //1.鼠标移动打印坐标的效果
  const {mouseX,mouseY,mouseMove} = useMousePoint()

  //2.点击加载狗的图片
  const {dogUrl,getDog} = useGetDog()
</script>

<style lang="scss" scoped>
  .app {
    width: 100%;
    height: 500px;
    border: 1px solid #000;
  }
</style>
